//基本长度单位
@p1:1px;
@p2:2px;
@p5:5px;
@p10:10px;
@p12:12px;
@p14:14px;
@p20:20px;
@p24:24px;

@max-width:640px;
@min-width:320px;

@no:none;
@yahei:'微软雅黑';
@cen:center;
@l:left;
@r:right;
@c:center;

//颜色值
@cblack:#000;
@cred:#da5656;
@cwhite:#fff;
@cblue:#387be8;
@cyellow:#ffd200;
@cgraybg:#f4f4f4;
@ce:#eeeeee;
@cde:#dedede;



//图片基本路径
@baseurl : "../images/";


//初始与基础类
body,li,ul,h2,h1,h3,h4,h5,h6,p,dl,dd,dt{margin:0;}
body{font-size:@p14;
  font-family:@yahei,Heiti SC;;
}
.wrap{
  min-width: @min-width;
  max-width: @max-width;
  .w(100%);
  .ma;
  overflow:hidden;
}
ul{padding:0;}
li{list-style:@no;}
a{text-decoration:@no; color:@cblack;}
.tl{text-align:left;} .tr{text-align:right;}
.fb{font-weight:bold;}
.mt20{margin-top:@p20;}
.mt10{margin-top:@p10;}
.ml10{margin-left:@p10;}
.mr10{margin-right:@p10;}
.mt15{margin-top:15px;}
.mt5{margin-top:@p5;}
.ma{margin:0 auto;}
.p10{padding:@p10;}
.pb10{padding:@p10;}
.ml5{margin-left:@p5;}
.dn{display:@no;}
.db{display:block;}
.g6{color:#666;}
.g3{color:#333;}
.g9{color:#999;}
.gc{color:#ccc;}
.tc{text-align:@c;}
.f14{ font-size:@p14;}
.ell{text-overflow:ellipsis;overflow:hidden; white-space:nowrap;}
.oh{overflow:hidden;}
.fix { *zoom:1; }
.fix:after {content:"\200B"; display:block; height:0; clear:both; }/*用于清除浮动，内容为\200B指零宽度空格，即可省略visible:hidden*/

.pt10{padding-top:@p10;}
.pt20{padding-top:@p20;}
:root,body{min-height:100%;}
a,li{-webkit-tap-highlight-color: transparent;-webkit-touch-callout: @no;
  -webkit-user-select: @no;}
a img{border:0;}
input,button,select,textarea{outline:@no;-webkit-appearance: none;}
.fl{float:@l;}
.fr{float:@r;}
.pr{position:relative;}
.circle{border-radius:100%;-webkit-border-radius:100%;}
.cw{color:#fff;}

//公用函数类

//圆角
.border-radius(@radius:@p5){
  border-radius:@radius;
  -webkit-border-radius:@radius;
}
.box-sizing(){
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.transition(@time:1s){
  transition: all @time;
  -webkit-transition: all @time;
}
.rorate(@deg:0){
  transform: rotate(@deg);
  -webkit-transform: rotate(@deg);
}
//全屏背影
.fullbg(@picname){
  background:url("@{baseurl}@{picname}") left top no-repeat;
  background-size:100% 100%;
}
//具体尺寸背影
.bg-size(@picname,@w:auto,@h:auto,@l:left,@t:top,@p:no-repeat){
  background:url("@{baseurl}@{picname}") @l @t @p;
  background-size:@w @h;
}
//普通背景
.bg(@picname,@l:left,@t:top,@p:no-repeat){
  background:url("@{baseurl}@{picname}") @l @t @p;
}
//居中背景
.bg-center(@picname,@p:no-repeat){
  background:url("@{baseurl}@{picname}") center center @p;
}
//背景色
.bg-color(@c){
  background-color:@c;
}
.mt(@px){
  margin-top:~`@{px} + 'px'`;
}
.mr(@px){
  margin-right:~`@{px} + 'px'`;
}
.ml(@px){
  margin-left:~`@{px} + 'px'`;
}
.mb(@p){
  margin-bottom:~`@{p} + 'px'`;
}
.pt(@px){
  padding-top:~`@{px} + 'px'`;
}
.pr(@px){
  padding-right:~`@{px} + 'px'`;
}
.pl(@px){
  padding-left:~`@{px} + 'px'`;
}
.plr(@px:10){
  padding-right:~`@{px} + 'px'`;
  padding-left:~`@{px} + 'px'`;
}
.ptb(@px:10){
  padding-top:~`@{px} + 'px'`;
  padding-bottom:~`@{px} + 'px'`;
}
.pb(@px){
  padding-bottom:~`@{px} + 'px'`;
}
.lh(@px){
  line-height:~`@{px} + 'px'`;
}
.fz(@px){
  font-size:~`@{px} + 'px'`;
}
//绝对定位
.pa(@left:0,@top:0,@zindex:1) {
  position:absolute;
  left:@left;
  top:@top;
  z-index:@zindex;
}
.pab(@left:0,@bottom:0,@zindex:1) {
  position:absolute;
  left:@left;
  bottom:@bottom;
  z-index:@zindex;
}
//绝对定位right
.par(@right:0,@top:0,@zindex:1) {
  position:absolute;
  right:@right;
  top:@top;
  z-index:@zindex;
}
//绝对定位居中
.ab-center(@w,@h,@zindex:1){
  position:absolute;
  left:50%;
  top:50%;
  width:~`@{w} + 'px'`;
  height:~`@{h} + 'px'`;
  margin:~`-@{h}/2 + 'px 0 0 -' + @{w}/2 + 'px'`;
  z-index:@zindex;
}
.pf(@left,@top,@z-index:1){
  position:fixed;
  left:@left;
  top:@top;
  z-index:@z-index;
}
.pfr(@right,@top,@z-index:1){
  position:fixed;
  right:@right;
  top:@top;
  z-index:@z-index;
}
//设置为块级元素，设置高宽
.dba(@w,@h) {
  display: block;
  width: ~`@{w} + 'px'`;
  height: ~`@{h} + 'px'`;
  line-height:~`@{h} + 'px'`;
}
.dib(@w,@h) {
  display: inline-block;
  width: ~`@{w} + 'px'`;
  height: ~`@{h} + 'px'`;
  line-height:~`@{h} + 'px'`;
}
.wh(@w,@h) {
  width:@w;
  height:@h;
}
.w(@w){
  width:@w;
}
.h(@h){
  height:@h;
}

.c(@color){
  color:@color;
}

//设置统一高度与行高
.dl(@h){
  height: ~`@{h} + 'px'`;
  line-height: ~`@{h} + 'px'`;
}
.bd(@c){
  border:1px solid @c;
}
.bdb(@c){
  border-bottom:1px solid @c;
}
.bdt(@c){
  border-top:1px solid @c;
}
.box-shadow(@v){
  box-shadow:@v;
}
.lh30{
  .lh(30);
}
.lh24{
  .lh(24);
}

.df{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.df1{
  -webkit-box-flex: 1;
  flex:1;
  -webkit-flex:1;
  width:0%; //子元素的内容长短不同会导致无法“等分”
}


//提示消息和loading
.p_tip{ position:fixed;left:0;bottom:20%; text-align:center;width:100%;z-index:102;}
.p_tip span{background-color:#333;color:#fff;padding:10px 20px;border-radius:5px;font-size:12px;}
.loader-inner {
  width: 80px;
  padding:18px 0;
  text-align: center;
  font-size: 10px;
  position:fixed;left:50%;top:50%;margin:-40px 0 0 -40px;
  z-index:10000;
  .bg-color(rgba(0,0,0,0.9));
  .border-radius(10px);
}
@-webkit-keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1); } }

@keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1); } }

.line-scale-pulse-out > div {
  background-color: #ffd200;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: line-scale-pulse-out 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85);
  animation: line-scale-pulse-out 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85); }
.line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {
  -webkit-animation-delay: 0.2s !important;
  animation-delay: 0.2s !important; }
.line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {
  -webkit-animation-delay: 0.4s !important;
  animation-delay: 0.4s !important; }


//
.share-tip{
  .pfr(10px,20px,5);
};
.pop-bg{
  .pf(0,0,4);
  .wh(100%,100%);
  .bg-color(@cblack);
  opacity:0.8;
}

@-webkit-keyframes toBig {
  0% { -webkit-transform: scale(0.2);opacity:0.2; }
  100% { -webkit-transform: scale(1.0);opacity:1; }
}

@keyframes toBig {
  0% { transform: scale(0.2);opacity:0.2; }
  100% { transform: scale(1.0);opacity:1; }
}

.lable{
  .pa(50%,50%);
  .wh(160px,28px);
  a{
    .pa(10px,-14px);
    .bg-color(@cyellow);
    padding:8px;
    .bd(rgba(0,0,0,0.4));
    .border-radius(22px);
    line-height: 12px;
    text-align:left;
  }
  b{
    .pa(-5px,-5px,2);
    .wh(8px,8px);
    .db;
    .bg-color(@cyellow);
    .border-radius(100%);
    border:2px solid rgba(0,0,0,0.9);
    -webkit-animation: toBig .5s infinite ease-in-out;
    animation: toBig .5s infinite ease-in-out;
  }

}
.lable-right{
  a{
    .par(10px,-14px);
    left:auto;
  }
  b{
    left:auto;
    .par(-5px,-5px);
  }
}

.index-fix{
  .bg-color(#21222a);
  height:40px;
  line-height: 40px;
  width:100%;
  .pt(5);
  .pb(5);
  position:fixed;left:0;bottom:0;
  z-index:6;
  -webkit-animation:slideUp .4s ease;
  li{
    width:33%;
    .fl;
    .tc;
  }
  a{
    .g6;
    width:100%;.db;
    .pt(12);
  }
  .find{
    .bg-size('index_38.png',27px,auto,center,3px);
  }
  .find_on{
    .bg-size('index_37.png',27px,auto,center,3px);
  }
  .me{
    .bg-size('index_34.png',19px,auto,top,center);
  }
  .me_on{
    .bg-size('index_35.png',auto,20px,top,center);
  }
  .add{
    .pr;
    height:52px;
    a{
      .pt(5);
      .db;
      height:50px;
      .pa(0,-10px);
      .bg-color(@cyellow);
    }
    .left{
      .pa(-5px,-10px);
    }
    .right{
      .par(-5px,-10px);
    }
  }
}
@-webkit-keyframes slideUp{
  0%{-webkit-transform:translate(0,100px)}
  100%{-webkit-transform:translate(0,0)}
}

.fix-top{
  .pa(0,0,4);
  .wh(100%,60px);
  .p10;
  .box-sizing();
  box-shadow: 0 0 9px #000;
  .bg-color(rgba(0,0,0,0.9));
  .empty-btn{
    .bd(@cyellow);
    .wh(100%,36px);
    display:inline-block;
    .tc;
    .lh(36);
    .c(@cyellow);
    .border-radius(20px);
    .mt(2);
    max-width:140px;
  }
  .icon{
    .fl;
    .mr10;
    .border-radius();
  }
  .wz{
    .lh(20);
    .c(@cwhite);
  }
  .cy{
    .c(@cyellow);
  }
  .right-btn{
    .pl(204);
    .pr(30);
    .tr;
  }
  .fl-block{
    .w(194px);
  }
  .close-icon{
    .par(10px,20px);
  }
}

.back-home{
  position:fixed;
  right:10px;
  bottom:70px;
  z-index:1;
}

.page-animate{
  opacity:0;
  transition:all .5s;
  -webkit-transition:all .5s;
}
.show{
  opacity:1 !important;
}
.h70{
  .h(70px);
}
.confirm{
  .bg-color(rgba(0,0,0,0.7));
  position:fixed;
  left:0;top:0;
  .wh(100%,100%);
}
.confirm-box{
  background-color:#fff;
  width:300px;
  border-radius:5px;
  position:absolute;
  left:50%;top:40%;
  margin-left:-150px;
  .f14;
  .cont{
    padding:20px;
    .tc;
  }
  .btns{
    border-top:1px solid #ccc;
    a{
      .db;
      .fl;
      .w(50%);
      .box-sizing();
      .tc;
      .dl(40);
      &:first-child{
        border-right:1px solid #ccc;
      }
    }
  }
}